// 绑定响应式函数
function totalFn() {
  let totalNum = null;
  let totalPrice = null;
  //遍历 获得总数和总价格同时去除小数点精度丢失问题
  $(".goodsInput:checked").each((i, item) => {
    // 获取勾选商品>遍历
    // find方法找到单价和数量
    let num = $(item).parents("tr").find(".num").val();
    let price = $(item).parents("tr").find(".tot").text();
    // 累计
    totalNum += parseInt(num);
    totalPrice += (parseInt(num) * (parseFloat(price) * 100)) / 100;
  });
  //重写单价和数量
  $("#shuliang").text(totalNum);
  $("#zong1").text(totalPrice);
  // 判断
  let status = $(".goodsInput").length === $(".goodsInput:checked").length;
  $("#allselect").prop("checked", status);
}

$("table:eq(1) tbody").on("click", ".goodsInput", function () {
  // 更新数据
  totalFn();
});

//  数量 update
// 1 获取input框 绑定 事件委托
$("table:eq(1) tbody").on("input", ".num", function () {
  let num = $(this).val();
  // 过滤数据，赋值给num
  num = String(num).replace(/\D/g, "");
  if (num < 1) num = 1;
  $(this).val(num);
  //      更新数据
  totalFn();
});

//  数量-1
// 1 获取-按钮 绑定 事件委托
// 2 事件处理函数中 数字-1
$("table:eq(1) tbody").on("click", ".min", function () {
  //  获取this后input框数据
  let num = $(this).next().val();
  num--;
  if (num < 1) {
    alert(`至少购买一个`);
    return;
  }
  // 重写页面
  $(this).next().val(num);
  //      更新数据
  totalFn();
});

// 数量+1
// 1 获取+1按钮 绑定 事件委托
$("table:eq(1) tbody").on("click", ".add", function () {
  // 2 事件中  数字+1
  // 先获取前一个input框的数据
  let val = $(this).prev().val();
  // 累计  ++自动转number
  val++;
  // 重写页面
  $(this).prev().val(val);
  //      更新数据
  totalFn();
});

// 删除商品
// 1 获取删除按钮 绑定 事件委托
// 2 事件中：删除tr 更新数据
$("table:eq(1) tbody").on("click", ".del", function () {
  $(this).parents("tr").remove();
  totalFn();
});

// 添加
// 1 获取添加按钮 绑定事件
$("#addGoods").click(function () {
  // 2 修改全选状态
  $("#allselect").prop("checked", false);
  // 3 事件处理函数中：页面追加一个商品
  $("table:eq(1) tbody").append(`
        <tr>
            <td class="tb2_td1">
                <input class="goodsInput" type="checkbox" value="1" name="newslist" id="newslist-1">
            </td>
            <td class="tb2_td2"><a href="#"><img src="images/img1.jpg"></a></td>
            <td class="tb2_td3"><a href="#">产品标题</a></td>
            <td class="tb1_td4">一件</td>
            <td class="tb1_td5">
                <input class="min"  name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-">
                <input class="num"  name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;">
                <input class="add" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+">
            </td>
            <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1</label></td>
            <td class="tb1_td7"><a href="javascript:void(0);" class="del">删除</a></td>
        </tr>
    `);
});

// 反选
// 1 获取反选按钮 绑定事件
// 2 事件函数
//      然后获取所有商品状态并且状态取反
//      更新数据
$("#fanselect").click(function () {
  $(".goodsInput").each((i, item) => {
    $(item).prop("checked", !$(item).prop("checked"));
  });
  totalFn();
});

// 全选全不选
// 1 获取全选全不选标签 绑定事件
// 2 事件函数
//    先获取全选全不选标签 状态
//    然后获取所有商品状态并且同步状态
//    更新数据
$("#allselect").click(function () {
  $(".goodsInput").prop("checked", $(this).prop("checked"));
  totalFn();
});
